<template>
  <div class="intermediate-page">
    <div class="page-header">
      <h1>第二题</h1>
      <ol class="description-list">
        <li>调用接口,获取数据,并展示在页面上</li>
        <li>在components文件夹下写一个天气组件,用于展示实时天气和未来天气</li>
        <li>接口文档链接<a href="https://apifox.com/apidoc/shared-251ff398-e08d-4c37-bcad-caa5ba02ce01">https://apifox.com/apidoc/shared-251ff398-e08d-4c37-bcad-caa5ba02ce01</a></li>
      </ol>
    </div>
    
    <div class="content-section">
      <!-- 天气组件 -->
       <weather></weather>
    </div>
  </div>
</template>

<script>
import Weather from '@/components/Weather.vue';
export default {
  name: 'IntermediatePage',
  components: {
    Weather
  }
};
</script>

<style scoped>
.intermediate-page {
  padding: 20px;
}

.page-header {
  margin-bottom: 2rem;
  text-align: center;
}

.page-header h1 {
  font-size: 2.2rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.description-list {
  color: #7f8c8d;
  font-size: 1.1rem;
  text-align: left;
  padding-left: 2rem;
  margin: 1rem auto;
  max-width: 600px;
}

.description-list li {
  margin-bottom: 0.5rem;
}

.description-list a {
  color: #409EFF;
  text-decoration: none;
}

.content-section {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
  padding: 2rem;
  min-height: 400px;
}
</style> 